<template>
  <div>
    <van-nav-bar title="注册登录" left-text left-arrow @click-left="onClickLeft"/>
    <van-form ref="loginFormRef" :model="loginForm" colon>
      <van-cell-group>
        <van-field
          v-model="loginForm.cellPhoneNumber"
          name="cellPhoneNumber"
          label="手机号"
          placeholder="手机号"
          :rules="[{ pattern,required: true, message: '请填写手机号' }]"
          clearable
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          class="passwordInput"
          v-model="loginForm.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          clearable
        />
      </van-cell-group>
      <van-field
        v-model="loginForm.verificationCode"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        name="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
        <template #button>
          <van-button size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 30px;">
        <van-button round block type="danger" @click="onSubmit">登录</van-button>
        <br>
        <van-button hairline plain round block type="danger" class="register" @click="register">注册</van-button>
      </div>
    </van-form>
    <van-divider>其他登录方式</van-divider>
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg"/>
        <br>
        <span>QQ</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg"/>
        <br>
        <span>微信</span>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg"/>
        <br>
        <span>苹果</span>
      </van-grid-item>
    </van-grid>
    <p>未注册的手机号验证后将自动创建账号</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        cellPhoneNumber: "18088888888",
        password: "123456",
        verificationCode: "123456"
      },
      pattern: /^1[3456789]\d{9}$/
    };
  },
  methods: {
    //   点击返回上一页面
    onClickLeft() {
      this.$router.push("/home");
    },

    // 点击登入
    onSubmit(cellPhoneNumber, password, verificationCode) {
      if (this.loginForm.cellPhoneNumber == "") {
        return false;
      }
      if (this.loginForm.password == "") {
        return false;
      }
      if (this.loginForm.verificationCode == "") {
        return false;
      }
      this.$router.push("/home");
      this.$Notify({ type: "success", message: "登入成功" });
    },
    // 注册
    register() {}
  },
  watch: {}
};
</script>

<style lang="less" scoped>
.van-divider {
  margin-top: 50px;
}

p {
  margin-top: 20px;
  text-align: center;
  color: #ccc;
  font-size: 12px;
}
</style>